<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Page Title -->
    <title>Overview | Spyre Documentation - Slick contemporary multipurpose theme</title>

    <!-- Favicons -->
    <link rel="apple-touch-icon" sizes="180x180" href="../assets/img/favicons/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../assets/img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../assets/img/favicons/favicon-16x16.png">
    <link rel="manifest" href="../assets/img/favicons/site.webmanifest">
    <link rel="mask-icon" href="../assets/img/favicons/safari-pinned-tab.svg" color="#f23838">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    <!-- Vendor Stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,700%7CRoboto:300,400,700" rel="stylesheet">
    <link href="../assets/vendor/material-design-iconic-font/dist/css/material-design-iconic-font.min.css" rel="stylesheet">
    <link href="../assets/vendor/prismjs/prism.css" rel="stylesheet">

    <!-- Theme Stylesheets -->
    <link href="../dist/css/theme.min.css" rel="stylesheet">

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-129313359-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-129313359-1');
    </script>
</head>

<body class="pt-5 pt-lg-6">
<!-- Preloader -->
<div class="preloader">
    <div class="spinner">
        <div class="circles"></div>
    </div>
</div>
<!-- End of Preloader -->

<!-- Header -->
<header class="spyre-navbar navbar navbar-expand-lg navbar-dark bg-secondary fixed-top align-items-center">
    <div class="container-fluid">
        <a class="navbar-brand mr-lg-5 mr-xl-7" href="../pages/index.html">
            <img src="../assets/img/logo.svg" class="d-none d-lg-block" alt="Spyre" width="183" />
            <img src="../assets/img/logo.svg" class="d-block d-lg-none" alt="Spyre" width="150" />
        </a>

        <div class="search d-none d-lg-flex justify-content-end ml-auto mr-2">
            <input class="form-control mr-2" type="text">
            <i class="zmdi zmdi-search"></i>
        </div>

        <div class="menu-toggle">
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="cross">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

    <!-- Spyrenav Overlay -->
    <div class="spyre-navbar-overlay overlay-slide">
        <div class="container-fluid">
            <div class="row">
                <div class="spyre-navbar-nav-container col-md-6 col-lg-5 col-xl-4 bg-white ext-l">
                    <nav class="spyre-navbar-nav">
                        <ul class="spyre-nav">
                            <li class="spyre-nav-item"><a href="../pages/index.html" class="spyre-nav-link">Overview</a></li>
                            <li class="spyre-nav-item dropdown">
                                <a href="#" class="spyre-nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Pages</a>
                                <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <li class="dropdown-menu-item"><a href="../pages/home.html" class="dropdown-menu-link">Homepage</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/services.html" class="dropdown-menu-link">Services</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/blog.html" class="dropdown-menu-link">Blog</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/blog-single.html" class="dropdown-menu-link">Blog single</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/portfolio.html" class="dropdown-menu-link">Portfolio</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/about.html" class="dropdown-menu-link">About</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/contact.html" class="dropdown-menu-link">Contact</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/team.html" class="dropdown-menu-link">Team</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/faq.html" class="dropdown-menu-link">Faq</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/pricing.html" class="dropdown-menu-link">Pricing</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/careers.html" class="dropdown-menu-link">Careers</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/careers-single.html" class="dropdown-menu-link">Careers single</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/coming-soon.html" class="dropdown-menu-link">Coming soon</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/404.html" class="dropdown-menu-link">404</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/sign-in.html" class="dropdown-menu-link">Sign In</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/sign-up.html" class="dropdown-menu-link">Sing Up</a></li>
                                    <li class="dropdown-menu-item"><a href="../pages/recover-account.html" class="dropdown-menu-link">Recover account</a></li>
                                </ul>
                            </li>
                            <li class="spyre-nav-item"><a href="../docs/animations.html" class="spyre-nav-link">Components</a></li>
                            <li class="spyre-nav-item"><a href="../docs/index.html" class="spyre-nav-link">Docs</a></li>
                            <li class="spyre-nav-item"><a href="https://themes.getbootstrap.com/product/spyre-slick-contemporary-multipurpose-theme" target="_blank" class="spyre-nav-link">Purchase</a></li>
                        </ul>
                    </nav>
                </div>

                <div class="col-lg-7 col-xl-8 d-none d-md-block">
                    <div class="d-flex flex-column h-100">
                        <div class="d-flex h-100">
                            <div class="align-self-center">
                                <div class="text-uppercase"
                                     data-background-text="communication"
                                     data-color="#7079a2"
                                     data-opacity="0.02"
                                     data-font-size="85px"
                                     data-font-weight="500"
                                     data-offset-x="-5%"
                                     data-letter-spacing="5px"
                                ></div>
                                <div class="text-uppercase"
                                     data-background-text="planning"
                                     data-color="#7079a2"
                                     data-opacity="0.04"
                                     data-font-size="175px"
                                     data-font-weight="500"
                                     data-offset-x="29%"
                                     data-padding="7vh 0 2vh 0"
                                     data-letter-spacing="5px"
                                ></div>
                                <div class="text-uppercase"
                                     data-background-text="delivering"
                                     data-color="#7079a2"
                                     data-opacity="0.03"
                                     data-font-size="140px"
                                     data-font-weight="500"
                                     data-offset-x="15%"
                                     data-letter-spacing="5px"
                                ></div>
                            </div>
                        </div>

                        <div class="mt-auto ml-auto">
                            <ul class="nav flex-nowrap">
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-twitter text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-instagram text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-facebook-box text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-pinterest text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-flickr text-white"></i>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link px-2" href="#" target="_blank">
                                        <i class="zmdi zmdi-youtube text-white"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End of Spyrenav Overlay -->
</header>
<!-- End of Header -->


<!-- Main Content -->
<main class="main minh-100vh">
    <section class="py-0">
        <div class="jumbotron jumbotron-fluid bg-blue-light py-7 px-lg-4 m-0">
            <div class="container-fluid">
                <h1 class="display-4">Introduction</h1>
                <p class="lead mb-0">Get started with Spyre, the contemporary multipurpose theme, using Bootstrap, the world's most popular framework for building responsive, mobile-first sites.</p>
            </div>
        </div>
    </section>

    <section class="py-0">
        <div class="container-fluid px-lg-5">
            <div class="row">
                <div class="col-lg-3 col-xl-2 pt-lg-6 border-right">
                    <div class="pb-3 pb-lg-7" data-toggle="sticky" data-sticky-offset-top="150">
                        <nav class="navbar navbar-expand-lg navbar-light px-0">
                                    <span class="d-block d-lg-none navbar-text">
                                        Submenu
                                    </span>
                            <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarAside" aria-controls="navbarAside" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                            </button>
                            <div class="collapse navbar-collapse" id="navbarAside">
                                <ul class="navbar-nav flex-column">
                                    <li><h5 class="mb-4">Getting started</h5></li>
                                    <li><a href="../docs/index.html" class="fw-bold">Introduction</a></li>
                                    <li><a href="../docs/file-structure.html" class="text-600">File structure</a></li>
                                    <li><a href="../docs/customization.html" class="text-600">Customization</a></li>
                                    <li><a href="../docs/gulp.html" class="text-600">Gulp</a></li>
                                    <li><a href="../docs/plugins.html" class="text-600">Plugins</a></li>
                                    <li><a href="../docs/changelog.html" class="text-600">Changelog</a></li>

                                    <li class="mt-5"><h5 class="mb-4">Components</h5></li>
                                    <li><a href="../docs/animations.html" class="text-600">Animations</a></li>
                                    <li><a href="../docs/backgrounds.html" class="text-600">Backgrounds</a></li>
                                    <li><a href="../docs/background-text.html" class="text-600">Background text</a></li>
                                    <li><a href="../docs/borders.html" class="text-600">Borders</a></li>
                                    <li><a href="../docs/buttons.html" class="text-600">Buttons</a></li>
                                    <li><a href="../docs/cards.html" class="text-600">Cards</a></li>
                                    <li><a href="../docs/carousel.html" class="text-600">Carousel</a></li>
                                    <li><a href="../docs/countdown.html" class="text-600">Countdown</a></li>
                                    <li><a href="../docs/fancybox.html" class="text-600">FancyBox</a></li>
                                    <li><a href="../docs/forms.html" class="text-600">Forms</a></li>
                                    <li><a href="../docs/google-maps.html" class="text-600">Google Maps</a></li>
                                    <li><a href="../docs/masonry.html" class="text-600">Masonry</a></li>
                                    <li><a href="../docs/parallax.html" class="text-600">Parallax</a></li>
                                    <li><a href="../docs/smooth-scroll.html" class="text-600">Smooth scroll</a></li>
                                    <li><a href="../docs/spyrenav.html" class="text-600">Spyrenav</a></li>
                                    <li><a href="../docs/sticky.html" class="text-600">Sticky</a></li>
                                    <li><a href="../docs/typed-text.html" class="text-600">Typed text</a></li>

                                    <li class="mt-5"><h5 class="mb-4">Design elements</h5></li>
                                    <li><a href="../docs/colors.html" class="text-600">Colors</a></li>
                                    <li><a href="../docs/helpers.html" class="text-600">Helpers</a></li>
                                    <li><a href="../docs/icons.html" class="text-600">Icons</a></li>
                                    <li><a href="../docs/typography.html" class="text-600">Typography</a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                </div>

                <div class="col-lg-9 col-xl-8 py-6 px-lg-5">
                    <h3 class="mb-4" id="get-started-with-spyre">Get started with Spyre</h3>
                    <p class="mb-4">Click the button below to buy a license and get started with Spyre. To learn more about the different licenses offered by Bootstrap Marketplace and to find the one that's right for you, click <a href="https://themes.getbootstrap.com/licenses/" target="_blank">here</a>.</p>
                    <a href="https://themes.getbootstrap.com/product/spyre-slick-contemporary-multipurpose-theme" class="btn btn-primary mb-6 px-4" target="_blank">Purchase now<i class="zmdi zmdi-shopping-cart ml-2"></i></a>

                    <h3 class="mb-4" id="quick-start">Quick start</h3>
                    <p class="mb-6">Looking to start your project quickly? Just unzip the <code>spyre-v1.2.0.zip</code>. We have precompiled and packaged everything in the pages directory for you. Start editing the <code>pages/index.html</code> with a text or code editor, save it and open the file in your favourite browser to see the changes.</p>

                    <h3 class="mb-4" id="starter-template">Starter template</h3>
                    <p>This basic template is a guideline for how to structure your pages when building with our theme. Included below are all the necessary elements for using the theme's CSS and JS.</p>

                    <pre class="mt-4 mb-6"><code class="language-html" data-lang="html">
&lt;!doctype html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;

        &lt;!-- Page Title --&gt;
        &lt;title&gt;Hello World&lt;/title&gt;

        &lt;!-- Vendor Stylesheets --&gt;
        &lt;link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500,700|Roboto:300,400,700" rel="stylesheet"&gt;

        &lt;!-- Theme Stylesheets --&gt;
        &lt;link href="../assets/css/theme.css" rel="stylesheet"&gt;
    &lt;/head&gt;

    &lt;body&gt;
        &lt;!-- Main Content --&gt;
        &lt;main class="main"&gt;...&lt;/main&gt;
        &lt;!-- End of Main Content --&gt;


        &lt;!-- Core Javascripts --&gt;
        &lt;script src="../assets/vendor/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="../assets/vendor/popper.js/dist/umd/popper.min.js"&gt;&lt;/script&gt;
        &lt;script src="../assets/vendor/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;

        &lt;!-- Theme Javascripts --&gt;
        &lt;script src="../assets/js/theme.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

                    <h3 class="mb-4" id="support">Support</h3>
                    <p>We provides support for bug fixes and guidance on using the theme. To access support, follow the support link in your Bootstrap Themes dashboard.</p>
                </div>

                <div class="d-none d-xl-block col-2 pt-6">
                    <div data-toggle="sticky" data-sticky-offset-top="150">
                        <ul class="scrollspy list-unstyled">
                            <li class="mb-2">
                                <a href="#get-started-with-spyre" data-smooth-scroll data-smooth-scroll-offset="150" class="text-600">Get started with Spyre</a>
                            </li>
                            <li class="mb-2">
                                <a href="#quick-start" data-smooth-scroll data-smooth-scroll-offset="150" class="text-600">Quick start</a>
                            </li>
                            <li class="mb-2">
                                <a href="#starter-template" data-smooth-scroll data-smooth-scroll-offset="150" class="text-600">Starter template</a>
                            </li>
                            <li class="mb-2">
                                <a href="#support" data-smooth-scroll data-smooth-scroll-offset="150" class="text-600">Support</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<!-- End of Main Content -->

<!-- Footer -->
<footer class="bg-secondary text-white">
    <div class="container-fluid">
        <div class="d-flex justify-content-between align-items-center py-4">
            <span class="fs--1">&copy; 2019 Webinning. All rights reserved.</span>
            <a href="https://themes.getbootstrap.com/product/spyre-slick-contemporary-multipurpose-theme" class="btn btn-outline-light btn-sm px-4" target="_blank">Purchase now<i class="zmdi zmdi-shopping-cart ml-2"></i></a>
        </div>
    </div>
</footer>
<!-- End of Footer -->


<!-- Core Javascripts -->
<script src="../assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="../assets/vendor/popper.js/dist/umd/popper.min.js"></script>
<script src="../assets/vendor/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Vendor Javascripts -->
<script src="../assets/vendor/sticky-kit/dist/sticky-kit.min.js"></script>
<script src="../assets/vendor/prismjs/prism.min.js"></script>

<!-- Theme Javascripts -->
<script src="../dist/js/theme.min.js"></script>
</body>
</html>